import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from '../views/Home.vue'
// import HospitalDetail from '../views/HospitalDetail.vue'
// 由于点多次路由会导致出现异常报错，解决的方案
//  1. vue-router 降级处理：npm i vue-router@3.0.7
//  2. 直接在 push 方法最后添加异常捕获：@click="router.push('/home/searchPopup').catch(err => {})"
//  3. 直接修改原型方法 push (推荐)
const originalPush = VueRouter.prototype.push
VueRouter.prototype.push = function (location) {
  // 这里添加下句注释，解决 .catch() 没有进行预期错误处理引发的报错
  /* eslint handle-callback-err: "warn" */
  return originalPush.call(this, location).catch(error => {
  })
}
Vue.use(VueRouter)

const routes = [
  // 定一个重定向
  {
    path: '/',
    redirect: '/home'
  },
  {
    path: '/home',
    name: 'Home',
    component: Home
  },
  {
    path: '/hospitalDetail',
    name: 'HospitalDetail',
    component: () => import(/* webpackChunkName: 'Topic' */ '../views/HospitalDetail.vue')
  },
  {
    path: '/hospitalRoom',
    name: 'HospitalRoom',
    component: () => import(/* webpackChunkName: 'Topic' */ '../views/HospitalRoom.vue')
  },
  {
    path: '/updatePatient',
    name: 'UpdatePatient',
    component: () => import(/* webpackChunkName: 'Topic' */ '../views/Patient/UpdatePatient.vue')
  },
  {
    path: '/appointment',
    name: 'Appointment',
    component: () => import(/* webpackChunkName: 'Topic' */ '../views/Appointment.vue')
  },
  {
    path: '/generalList',
    name: 'GeneralList',
    component: () => import(/* webpackChunkName: 'Topic' */ '../views/GeneralList.vue')
  },
  {
    path: '/patientDetail',
    name: 'PatientDetail',
    component: () => import(/* webpackChunkName: 'Topic' */ '../views/Patient/PatientDetail.vue')
  },
  {
    path: '/personalCenter',
    name: 'PersonalCenter',
    component: () => import(/* webpackChunkName: 'Topic' */ '../views/Patient/PatientDetail.vue')
  },
  {
    path: '/user',
    name: 'User',
    component: () => import(/* webpackChunkName: 'User' */ '../views/User.vue')
  },
  {
    path: '/userCenter',
    name: 'UserCenter',
    component: () => import(/* webpackChunkName: 'User' */ '../views/PersonalCenter/UserCenter.vue')
  },
  {
    path: '/reserveInformation',
    name: 'ReserveInformation',
    component: () => import(/* webpackChunkName: 'User' */ '../views/PersonalCenter/ReserveInformation.vue')
  },
  {
    path: '/Doctor',
    name: 'Doctor',
    component: () => import(/* webpackChunkName: 'User' */ '../views/PersonalCenter/Doctor.vue')
  }
  // {
  //   path: '/about',
  //   name: 'About',
  //   // route level code-splitting
  //   // this generates a separate chunk (about.[hash].js) for this route
  //   // which is lazy-loaded when the route is visited.
  //   // 懒加载组件
  //   component: () => import(/* webpackChunkName: 'about' */ '../views/About.vue')
  // }
]

const router = new VueRouter({
  mode: 'history',
  base: process.env.BAER_URL,
  routes
})

// 这里创建 '路由拦截'/'(前置)路由守卫'
router.beforeEach((to, from, next) => {
  // ? to：要去的路由
  // ? from：来的路由
  // ? next：放行函数(如果不写 next()，则不可以跳转)

  const token = localStorage.getItem('token') // *获取登录 token
  // ! 若想要去购物车('/cart')，则需要进行登录 token 判断
  // ! 如果没有 token，则需要先进行登录，并跳转到登录界面
  if (to.path === '/cart') { // 表示去往购物车页面
    // * 进行 token 判断
    if (token) {
      next() // * 运行跳转
    } else {
      // ! 表示没有登录
      Vue.prototype.$toast('请先登录') // ! 这里不要用 this.$toast，因为无法判断 this
      setTimeout(() => {
        next('/user') // * 跳转至 user 页面进行登录
      }, 300)
    }
    return // !如果不写 return 则会先跳转至购物车，不符合逻辑
  }
  next() // 允许跳转
})

export default router
